@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: #ffffff;
  --foreground: #171717;
  --mainBackground: #2a2f4d;
  --mainForeground: #f44a4a;
}

@media (prefers-color-scheme: dark) {
  :root {
    /*#0a0a0a;*/
    --background: #0a0a0a;
    --foreground: #ededed;

    --mainBackground: #0a0a0a;
    --mainForeground: #f44a4a;
  }
}

body {
  color: var(--foreground);
  background: var(--background);
  font-family: Arial, Helvetica, sans-serif;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }

  /* 滚动条整体样式 */
  .custom-scrollbar::-webkit-scrollbar {
    width: 8px;
    /* 设置滚动条宽度 */
    height: 8px;
    /* 设置滚动条高度 (水平滚动条) */
  }

  /* 滚动条滑块（thumb）的样式 */
  .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #888;
    /* 滑块颜色 */
    border-radius: 10px;
    /* 滑块圆角 */
  }

  /* 滚动条滑块在悬停时的样式 */
  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #555;
    /* 滑块悬停时颜色 */
  }

  /* 滚动条轨道（track）的样式 */
  .custom-scrollbar::-webkit-scrollbar-track {
    background-color: #f1f1f1;
    /* 滚动条轨道颜色 */
  }
}
